<template>
	<el-watermark :content="userStore.watermark" :font="<any>fontConfig" :gap="[0, 0]" :height="400" :width="400" :z-index="10000000">
		<component :is="webConfigStore.layout.layoutMode"></component>
	</el-watermark>
</template>

<script lang="ts" setup>
import {useWebConfigStore} from '@/stores/modules/webConfig.store'
import {computed, nextTick, onBeforeMount, onMounted, onUnmounted, watch} from 'vue'
import {useEventListener} from '@vueuse/core'
import screenFull from 'screenfull'
import {useUserStore} from '@/stores/modules/user.store'
import {onAdaptiveLayout} from '@/utils/layoutUtil'
import type {WatermarkFontType} from 'element-plus/es/components/watermark'

const webConfigStore = useWebConfigStore()
const userStore = useUserStore()

const fontConfig = computed<WatermarkFontType>(() => {
	return {
		color: webConfigStore.layout.isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.15)'
	}
})

onBeforeMount(() => {
	// F11全屏事件
	useEventListener(window, 'keydown', onF11)
	useEventListener(window, 'resize', onAdaptiveLayout)
})

onMounted(() => {
	if (userStore.loginCallback) {
		userStore.loginCallback()
		userStore.loginCallback = undefined
	}
	onAdaptiveLayout()
	onSetNavTabsMinWidth()
	useEventListener(window, 'resize', onSetNavTabsMinWidth)
})

// 切换布局后，重新计算tabs区域的最小宽度
watch(() => webConfigStore.layout.layoutMode, () => {
	nextTick(() => {
		onSetNavTabsMinWidth()
	})
})

onUnmounted(() => {
	window.removeEventListener('keydown', onF11)
	window.removeEventListener('resize', onAdaptiveLayout)
	window.removeEventListener('resize', onSetNavTabsMinWidth)
})

const onF11 = (e: KeyboardEvent) => {
	if (e.code === 'F11') {
		e.preventDefault()
		screenFull.toggle()
	}
}

// 在实例挂载后为navTabs设置一个min-width，防止宽度改变时闪现滚动条
const onSetNavTabsMinWidth = () => {
	const navTabs = document.querySelector('.nav-tabs') as HTMLElement
	if (!navTabs) {
		return
	}
	const navBar = document.querySelector('.nav-bar') as HTMLElement
	const navMenus = document.querySelector('.nav-menus') as HTMLElement
	const minWidth = navBar.offsetWidth - (navMenus.offsetWidth + 20)
	navTabs.style.minWidth = minWidth.toString() + 'px'
}
</script>

<!-- 只有在 components 选项中的组件可以被动态组件使用-->
<script lang="ts">
import Default from '@/layouts/container/default.vue'
import Classic from '@/layouts/container/classic.vue'
import Streamline from '@/layouts/container/streamline.vue'

export default {
	components: {Default, Classic, Streamline}
}
</script>
